<script setup>
import { onMounted, ref, computed } from 'vue';
import { useToast } from "primevue/usetoast";
import { jwtDecode } from "jwt-decode";
import axios from '../../util/interceptor';

const token = localStorage.getItem("token");
const decoded = jwtDecode(token);
const name = ref("");
const id = ref("");
const job = ref("");
const phone = ref("");
const email = ref("");
const brief = ref("");
const userImgUrl = ref("");
const toast = useToast();
const password1 = ref("");
const password2 = ref("");
const password3 = ref("");
const differentPassword = ref(false)
const displayConfirmation = ref(false);
const PasswordDialog = ref(false);
const invalidUsername = ref(false);
const order = ref([])
const initHardwares = ref([
    { hardwareTitle: '拉手', hardwareSpecs: '', hardwareBrand: '', hardwareAmount: '' ,hardwareSpecial: ''},
    { hardwareTitle: '合页', hardwareSpecs: '', hardwareBrand: '', hardwareAmount: '' ,hardwareSpecial: ''},
    { hardwareTitle: '轨道', hardwareSpecs: '', hardwareBrand: '', hardwareAmount: '' ,hardwareSpecial: ''},
    { hardwareTitle: '三合一', hardwareSpecs: '', hardwareBrand: '', hardwareAmount: '' ,hardwareSpecial: ''},
    { hardwareTitle: '快装件', hardwareSpecs: '', hardwareBrand: '', hardwareAmount: '' ,hardwareSpecial: ''},
    { hardwareTitle: '打包纸', hardwareSpecs: '', hardwareBrand: '', hardwareAmount: '' ,hardwareSpecial: ''},
    { hardwareTitle: '胶带', hardwareSpecs: '', hardwareBrand: '', hardwareAmount: '' ,hardwareSpecial: ''},
    { hardwareTitle: '刀头', hardwareSpecs: '', hardwareBrand: '', hardwareAmount: '' ,hardwareSpecial: ''},
]);

onMounted(() => {
    console.log(decoded)
    init();
    getUserInfo();
});

const init = async () => {
  const defineId = window.location.search.split('=')[1];
  console.log(window.location.search.split('=')[1])
    const response = await axios.get(`order/getOrder/${defineId}`)
    console.log(response.data.data)
    const data = response.data.data
    if (response.data.code == 200) {
        order.value = data
            order.value.dealDateD = new Date(order.value.dealDate);
            order.value.dealTimeD = new Date(order.value.dealTime);
            order.value.createDateD = new Date(order.value.createDate);
            if(order.value.status != 1 && order.value.ordersHardware.length==0){
                order.value.ordersHardware = initHardwares.value;
            }
    }
    console.log(order)
};

const getUserInfo = async () => {


};

const close = () => {
    displayConfirmation.value = false;
};

const alterProfile = async () => {
    displayConfirmation.value = false;
    if (name.value == "") {
        invalidUsername.value = true;
        toast.add({ severity: 'warn', summary: 'Failed', detail: "用户名不能为空", life: 3000 });
        return;
    }
    const profileData = ref({
        name: name.value,
        email: email.value,
        phone: phone.value,
        brief: brief.value,
        id: id.value
    });
    console.log(profileData.value);
    const response = await axios.post("/user/updateProfile", profileData.value)
    console.log(response);
    if (response.data.code == 200) {
        toast.add({ severity: 'success', summary: 'Attention', detail: response.data.message, life: 3000 });
        setTimeout(() => {
            location.reload();
        }, 1500);
    }
    else {
        toast.add({ severity: 'warn', summary: 'Failed', detail: "头像上传失败", life: 3000 });
    }
}

const confirmButton = () => {
    displayConfirmation.value = true;
}

const showPasswordDg = () => {
    PasswordDialog.value = true;
    password1.value = "";
    password2.value = "";
    password3.value = "";
}

const hideDialog = () => {
    PasswordDialog.value = false;
}

const changePassword = () => {
    console.log(!password2.value)
    if (!password2.value || !password3.value) {
        differentPassword.value = true;
        return;
    } else if (password2.value != password3.value) {
        toast.add({ severity: 'error', summary: 'Error', detail: "密码输入不一致", life: 3000 });
        return;
    }
    const token = localStorage.getItem("token");
    const decoded = jwtDecode(token);
    console.log(decoded.username)
    const response = axios.post(`/user/login/${decoded.username}/${password1.value}`)
    if(response.data.code == 200){
        console.log(success);
    }
}

</script>

<template>
    <div class="grid">
        <div class="col-12">
            <div class="card">
                <h5>订单详情: {{ order.orderId }}</h5>
                <div class="p-fluid formgrid grid">
                    <div class="field col-12 md:col-6">
                        <label for="firstname2">销售人员</label>
                        <InputText :class="[{ 'p-invalid': invalidUsername }]" id="firstname2" type="text" v-model="order.sellerName" disabled/>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card">
                <h5>订单合同信息: 编号-{{ order.contractId }}</h5>
                <div class="p-fluid formgrid grid">
                    <!-- <div class="field col-12 md:col-4">
                        <label for="firstname2">合同编号</label>
                        <InputText id="lastname2" type="text" v-model="order.contractId" disabled/>
                    </div> -->
                    <div class="field col-12 md:col-3">
                        <label for="lastname2">交付时间</label>
                        <Calendar :showIcon="true" :showButtonBar="true" id="dealTimeD" v-model.trim="order.dealTimeD"
                    hourFormat="24" touchUI :class="{ 'p-invalid': submitted && !order.dealTimeD }" disabled/>
                    </div>
                    <div class="field col-12 md:col-3">
                        <label for="lastname2">交互完成尾款</label>
                        <InputNumber v-model.trim="order.finalPayment" inputId="currency-japan" mode="currency" currency="CNY"
                    locale="zh-CN" :class="{ 'p-invalid': submitted && !order.finalPayment }" disabled/>
                    </div>
                    <div class="field col-12 md:col-3">
                        <label for="lastname2">交互工作日</label>
                        <Calendar :showIcon="true" :showButtonBar="true" id="dealDateD" v-model.trim="order.dealDateD" hourFormat="24"
                    touchUI :class="{ 'p-invalid': submitted && !order.dealDateD }" disabled/>
                    </div>
                    <div class="field col-12 md:col-3">
                        <label for="lastname2">合同总额</label>
                        <InputNumber v-model.trim="order.currency" inputId="currency-japan" mode="currency" currency="CNY"
                    locale="zh-CN" :class="{ 'p-invalid': submitted && !order.currency }" disabled/>
                    </div>
                    <div class="field col-12 md:col-6">
                        <label for="clientName">客户姓名</label>
                        <InputText id="clientName" v-model.trim="order.clientName" required="true" autofocus
                        :class="{ 'p-invalid': submitted && !order.clientName }" disabled/>
                    </div>
                    <div class="field col-12 md:col-6">
                        <label for="lastname2">联系电话</label>
                        <InputText id="phone" v-model.trim="order.phone" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.phone }" disabled/>
                    </div>
                    <div class="field col-12">
                        <label for="address">订单客户安装地址</label>
                <Textarea id="address" v-model.trim="order.address" required="true" autofocus autoResize 
                    :class="{ 'p-invalid': submitted && !order.address }" disabled/>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card">
                <h5>板子信息: </h5>
                <div v-for="board in order.ordersBoards" :key="board.boardTitle"  class="p-fluid formgrid grid">
                <Divider align="left" type="solid">
                    <b>{{ board.boardTitle }}</b>
                </Divider>
                <div class="field col-12 md:col-3">
                    <label for="boardType">型号</label>
                    <InputText id="boardType" v-model.trim="board.boardType" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !board.boardType }" disabled/>
                </div>
                <div class="field col-12 md:col-2">
                    <label for="boardColor">颜色</label>
                    <InputText id="boardColor" v-model.trim="board.boardColor" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !board.boardColor }" disabled/>
                </div>
                <div class="field col-12 md:col-3">
                    <label for="boardBase">基材</label>
                    <InputText id="boardBase" v-model.trim="board.boardBase" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !board.boardBase }" disabled/>
                </div>
                <div class="field col-12 md:col-2">
                    <label for="boardSpecs">规格</label>
                    <InputText id="boardSpecs" v-model.trim="board.boardSpecs" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !board.boardSpecs }" disabled/>
                </div>
                <div class="field col-12 md:col-2">
                    <label for="boardAmount">数量</label>
                    <InputText id="boardAmount" v-model.trim="board.boardAmount" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !board.boardAmount }" disabled/>
                </div>
            </div>
        </div>
            <div class="card">
                <h5>五金信息: </h5>
                <div v-for="hardware in order.ordersHardware" :key="hardware.id"  class="p-fluid formgrid grid">
                <Divider align="left" type="solid">
                    <b>{{ hardware.hardwareTitle }}</b>
                </Divider>
                <div class="field col-12 md:col-2">
                    <label for="hardwareSpecs">规格</label>
                    <InputText id="hardwareSpecs" v-model.trim="hardware.hardwareSpecs" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !hardware.hardwareSpecs }" disabled/>
                </div>
                <div class="field col-12 md:col-2">
                    <label for="hardwareBrand">品牌</label>
                    <InputText id="hardwareBrand" v-model.trim="hardware.hardwareBrand" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !hardware.hardwareBrand }" disabled/>
                </div>
                <div class="field col-12 md:col-2">
                    <label for="hardwareAmount">数量</label>
                    <InputText id="hardwareAmount" v-model.trim="hardware.hardwareAmount" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !hardware.hardwareAmount }" disabled/>
                </div>
                <div class="field col-12 md:col-6">
                    <label for="hardwareSpecial">特殊功能</label>
                    <InputText id="hardwareSpecial" v-model.trim="hardware.hardwareSpecial" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !hardware.hardwareSpecial }" disabled/>
                </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card">
                <h5>审批意见：</h5>
                <div class="p-fluid formgrid grid">
                    <div class="field col-12 md:col-1"></div>
                    <div class="field col-12 md:col-6">
                    <h5 v-if="!order.generalManager1Name && !order.generalManager2Name"> 暂无</h5>
                        <h5 v-if="order.generalManager1Name" for="clientName">{{ order.generalManager1Name }}: {{ order.generalManager1Op }}</h5>
                    </div>
                    <div class="field col-12 md:col-5">
                        <h5 v-if="order.generalManager2Name" for="clientName">{{ order.generalManager2Name }}: {{ order.generalManager2Op }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
